<template>
  <div class="cube">
    已收到
    <div v-for="option in options" :key="option.value" :value="option.value">
      {{ option.value }}
    </div>
    <!--进入页面便进行websocket连接并接收List信息-->
    <!--使用v-for来动态实现下拉框-->
    <br />

    <el-form ref="sel" :model="sel" label-width="80px">
      <el-form-item >
        <el-select v-model="sel.sel" placeholder="请选择CUBE选项">
          <el-option
            v-for="option in options"
            :key="option.value"
            :value="option.value"
          >
            {{ option.value }}
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <button @click="addForm">添加一项</button>
    <button @click="clearForm">清空表单</button>
    <button @click="commitForm">提交表单</button>
    <br />
    现在表单里的项：{{ forms }}
  </div>
</template>

<script>
import { sendWebsocket, closeWebsocket } from "../utils/base/websocket";
import { dealData } from "../utils/cube/cubeDataDeal";
import cubeMsg from "../utils/cube/cubeData";

let cubeData;

export default {
  data() {
    return {
      options: [],
      sel: {
        sel : ""
      },
      forms: [],
    };
  },
  created() {
    this.requstWs();
  },
  beforeDestroy() {
    closeWebsocket();
  },
  methods: {
    wsMessage(data) {
      cubeData = data;
      let arr = dealData(cubeData);
      // console.log(this.options);

      console.log("arr : " + arr);
      arr.forEach((r) => {
        this.options.push({
          value: r.string,
          option: r.string,
          desc: r.desc,
        });
      });

      console.log("处理后的数据：" + arr.string);
      console.log("options中数据： " + this.options);
    },
    wsError() {
      console.log("连接websocket出现错误");
    },
    requstWs() {
      closeWebsocket();
      let newMsg = new cubeMsg("GENERAL_RETURN", "STRING");
      newMsg.addRecord({ name: "ENUM", return_value: "elem_basetype" });
      //send message.
      sendWebsocket(
        "ws://127.0.0.1:13998",
        newMsg.outputJson(),
        this.wsMessage,
        this.wsError
      );
    },
    addForm() {
      let struct_elem_attr = {
        name: "",
        cube_struct_elem_type: "",
        size: 0,
        ref: "",
        def: "",
      };
      if (this.sel.sel) {
        struct_elem_attr.cube_struct_elem_type = this.sel.sel;
        this.sel.sel = "";
      }
      this.forms.push(struct_elem_attr);
    },
    clearForm() {
      this.forms = [];
    },
    commitForm() {
      let recv = (data) => {
        console.log(data);
      };
      this.forms.forEach((r) => {
        closeWebsocket();
        let cubeSend = new cubeMsg("SEND", "FORM");
        //add record.
        cubeSend.addRecord(r);
        //send.
        sendWebsocket(
          "ws://127.0.0.1:13998",
          cubeSend.outputJson(),
          recv,
          this.wsError
        );
      });
    },
  },
};
</script>

<style>
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
</style>